<template>
  <div class="musPic">
    <div class="bigPic">
      <img class="bigimg" :src="require(`../../assets/imgs/ll/${md}`)" alt="">
      <img class="smallimg" :src="require(`../../assets/imgs/ll/${sm}`)" alt="" @click="changePic">
    </div>
  </div>
</template>
<script>
export default {
  
  data(){
    return {
      md1:"md1.jpg",
      md2:"md2.jpg",
      sm1:"sm1.jpg",
      sm2:"sm2.jpg",
      md:"md1.jpg",
      sm:"sm2.jpg",
    }
  },
  methods:{
    changePic(){
      if(this.sm != this.sm1){
        this.sm = this.sm1;
        this.md = this.md2;
      } else if(this.sm != this.sm2){
        this.sm = this.sm2;
        this.md = this.md1;
      } 
      
    }
  }
  
}
</script>
<style scoped>
  .bigPic{
    position: relative;
    width:90%;
    height: 500px;
    margin: 2rem auto;
    background-color:rgba(161, 159, 159, 0.6);
    border-radius: 4px;
  }
  .bigimg{
    position: absolute;
    top:2rem;
    left:3rem;
    border-radius: 5px;
  }
  .smallimg{
    position: absolute;
    top:2rem;
    right:3rem;
    border-radius: 5px;
  }
  .smallimg:hover{
    cursor: pointer;
  }

</style>